<template>
    <el-dialog v-bind="$attrs" v-on="$listeners"  @close="onClose" title="菜单管理">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="83px">
            <el-form-item label="权限名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入单行文本权限名称" clearable :style="{width: '100%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="权限标识" prop="permission">
                <el-input v-model="formData.permission" placeholder="请输入权限标识" clearable :style="{width: '100%'}">
                </el-input>
            </el-form-item>
            <el-form-item  label="权限路径" prop="path">
                <el-input v-model="formData.path" placeholder="请输入权限路径" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item v-if="!flag" label="所属菜单" prop="parentId">
                <el-select v-model="formData.parentId" placeholder="请选择所属菜单" clearable :style="{width: '100%'}">
                    <el-option v-for="(item, index) in models" :key="index" :label="item.name"
                               :value="item.id" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否菜单" prop="flag" >
                <el-switch v-model="flag"></el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="handelConfirm">确定</el-button>
        </div>
    </el-dialog>

</template>

<script>
    import modelsApi from "../../api/modelsApi";
    import {mapState } from "vuex"
    export default {
        name: "menuForm",
        inheritAttrs: false,
        data() {
            return {
                flag:false,
                formData: {
                    id:"",
                    name: "",
                    permission: "",
                    path: "",
                    parentId: "",
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入权限名称',
                        trigger: 'blur'
                    }],
                    permission: [{
                        required: true,
                        message: '请输入权限标识',
                        trigger: 'blur'
                    }],
                    path: [{
                        required: true,
                        message: '请输入权限路径',
                        trigger: 'blur'
                    }],
                    parentId: [{
                        required: true,
                        message: '请选择所属菜单',
                        trigger: 'change'
                    }],
                },
                parentIdOptions: [],
            }
        },
        computed:{
            ...mapState(['models'])
        },
        watch:{
            flag(val){
                this.rules.path[0].required=val
                this.rules.parentId[0].required=!val
                if(val==false)
                    this.formData.parentId=this.formData.parentId==0?"":this.formData.parentId
            }
        },
        methods: {
            open(data) {
                if(data!=""){
                    modelsApi.get(data.id).then(res=>{
                        this.formData=res.data
                        if(res.data.parentId==0){
                            this.flag=true
                        }
                    })
                }
                this.$emit('update:visible', true)
            },
            onClose() {
                this.$refs['elForm'].resetFields()
                this.formData.flag=false
                this.formData.parentId=''
                this.formData.id=""
            },
            close() {
                this.$refs['elForm'].resetFields()
                this.flag=false
                this.formData.parentId=''
                this.formData.id=""
                this.$emit('update:visible', false)

            },
            handelConfirm() {
                this.$refs['elForm'].validate(valid => {
                    if (valid) {
                        if (this.flag==true)
                            this.formData.parentId=0
                        if(this.formData.id==""){
                            modelsApi.save(this.formData).then(res=>{
                                this.close()
                                this.$emit("query")
                            })
                        }else {
                            modelsApi.update(this.formData).then(res=>{
                                this.close()
                                this.$emit("query")
                            })
                        }

                    }

                })
            },
        }
    }
</script>

<style scoped>

</style>